<template>
  <div class="index_headerBox">
    <index-head></index-head>
    <div class="loginCon clearfix">
      <img src="../assets/image/login_logo.png" class="login_logo">
      <div class="login_formBox">
        <img src="../assets/image/login_icon.png" class="login_icon">
        <p class="login_title">注册</p>

        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="register-form">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="用户名">
              <img slot="prefix" src="../assets/image/login_user.png" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="密码">
              <img slot="prefix" src="../assets/image/login_password.png">
            </el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="确认密码">
              <img slot="prefix" src="../assets/image/login_password.png">
            </el-input>
          </el-form-item>
          <div class="row">
            <el-form-item style="width: 170px;margin-right: 10px">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="phone" style="width: 200px">
              <el-input v-model="ruleForm.phone" placeholder="手机号">
              </el-input>
            </el-form-item>
          </div>
          <div class="row">
            <el-form-item prop="code" style="width: 220px;margin-right: 10px">
              <el-input v-model="ruleForm.code" placeholder="验证码"></el-input>
            </el-form-item>
            <el-form-item style="width: 130px">
              <el-button class="code-btn" @click="getCode"
                         :disabled="sendCodeDisabled">{{codeLabel}}
              </el-button>
            </el-form-item>
          </div>
          <el-form-item prop="unit">
            <el-input v-model="ruleForm.unit" placeholder="单位"></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="ruleForm.email" placeholder="邮箱"></el-input>
          </el-form-item>
          <div>
            <p class="login_forgot"><img src="../assets/image/login_point.png"> <span>忘记密码，请联系管理员</span></p>
            <button @click="submit" class="login_btn">注册</button>
            <p class="login_reg">已有账号？
              <router-link to="/login">立即登录</router-link>
            </p>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import indexHead from '../components/indexhead'
  import validate from "../libs/validate";

  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入电话号码'));
        } else if (!!value && !validate.mPattern.test(value)) {
          callback(new Error('请输入正确电话号码!'));
        } else {
          callback();
        }
      };
      var validateCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'));
        } else {
          callback();
        }
      };
      return {
        codeLabel: '获取验证码',
        uuid: '',
        sendCodeDisabled: false,
        options: [{
          value: '1',
          label: '中国大陆+86'
        }],
        value: '1',
        ruleForm: {
          username: '',
          password: '',
          phone: '',
          unit: '',
          email: '',
          code: '',
          checkPass: '',
        },
        rules: {
          username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{validator: validatePass, trigger: 'blur'}],
          phone: [{validator: validatePhone, trigger: 'blur'}],
          unit: [{required: true, message: '请输入单位', trigger: 'blur'}],
          code: [{validator: validateCode, trigger: 'blur'}],
          checkPass: [{validator: validatePass2, trigger: 'blur'}],
          email: [
            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']},
          ],
        }

      }
    },
    components: {
      // comFoot,
      indexHead
    },

    mounted() {

    },
    methods: {
      // ...mapActions({
      //     'getUserInfo':'getUserInfo'

      settime(countdown = 60) {
        if (countdown == 0) {
          this.sendCodeDisabled = false
          this.codeLabel = "获取验证码";
          countdown = 60;
          return false;
        } else {
          this.sendCodeDisabled = true
          this.codeLabel = "重新发送(" + countdown + ")";
          countdown--;
        }
        setTimeout(() => {
          this.settime(countdown);
        }, 1000);
      },
      getCode() {
        if (!this.ruleForm.phone) {
          this.$refs.ruleForm.validateField('phone');
          return
        }

        this.settime(60)
        this.$axios
          .request({
            url: "4000/sms-internal/codes",
            method: "post",
            params: {
              phone: this.ruleForm.phone
            }
          })
          .then(res => {
            this.uuid = res.data.key
          })
          .catch(function (error) {
            console.log(error);
          })
      },

      matcheCode() {

      },
      submit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let {
              username,
              password,
              phone,
              unit,
              email,
              code
            } = this.ruleForm
            this.$axios
              .request({
                url: "5100/users-anon/register",
                method: "post",
                data: {
                  username,
                  password,
                  phone,
                  unit,
                  email,
                  code,
                  uuid: this.uuid
                }
              })
              .then(res => {
                if (String(res.data.resp_code) === '1') {  // 失败
                  this.$message.error(res.data.resp_msg);
                  return
                }
                this.$confirm('注册成功', '提示', {
                  confirmButtonText: '去登录',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$router.push('/login')
                })
              })
              .catch(function (error) {
                console.log(error);
              })
              .finally(() => {
                this.sendCodeDisabled = false
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .footer {
    position: absolute;
  }

  .row {
    display: flex;
    align-items: center;
  }

  .register-form {
    width: 360px;
    margin: 0 auto;

    .el-input {
      background: #fff;
    }

    .code-btn {
      width: 100%;
      background: linear-gradient(top, #FFA84A 0, #FF8203 100%);
      color: #fff;
      border: 0;
      border-radius: 0
    }

    /deep/ .el-form-item__error {
      color: #f18504;
    }

    /deep/ .el-form-item__label {
      color: #fff !important;
    }

    /deep/ .el-input__inner {
      color: #000 !important;
      background: #fff !important;
      border-radius: 0
    }

    /deep/ .el-input__prefix {
      display: flex;
      align-items: center;
    }
  }

</style>
